<template>
      
          <div class="nav-item">
              <van-tabbar >
                <van-tabbar-item @click="back" icon="arrow-left" ></van-tabbar-item>
                <div class="line"></div>
                <van-tabbar-item icon="comment-o" :badge="Navbbar.comments" @click="viewComment(id)" ></van-tabbar-item>
                <van-tabbar-item :icon="like" :badge="goods" @click="goodJob()"></van-tabbar-item>
                <van-tabbar-item :icon="star" @click="Collection()"></van-tabbar-item>  
                
                    <div class="share">

                    <van-cell title="分享" @click="showShare = true">
                        <template #title>
                         <div><van-icon name="share-o" /></div> 
                        </template>
                    </van-cell>
                    
                    <van-share-sheet
                        v-model="showShare"
                        title="立即分享给好友   "
                        :options="options"
                        />
                 </div>
                    
                
                </van-tabbar>
                
                
          </div>
   
</template>

<script>

import { Toast } from 'vant';
    export default {
        name:'Navbbar',
        data() {
    return {
      Navbbar: [],
      comments:'',
      goods:'',
      show: false,
      id:'',
     username:'',
     password:'',
     showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      
        like:'good-job-o',
        liked:'good-job',
        good:false,
        stared:false,
        star:'star-o',
        stard:'star'


        };
    },

    components:{
        Toast,
    },

    created() {

        this.id = this.$route.params.id;
       
      this.getNavbbar(this.id);
      

    },
    mounted(){
            this.getCookie()
            
        },


    methods: {
        // 获取底部导航徽标数据
        getNavbbar(id){
            this.axios({

                 params: {
                   id
                },
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/story/'+this.id+'/extra',

                

            }).then(result =>{
                
                this.Navbbar = result.data;
                this.goods = result.data.popularity;
                
               
                
            }).catch(err =>{
               
            })
        },

        viewComment(id){
             
            this.$router.push({ name: 'Comment', params: {id} })
        },

         getCookie() {
        if (document.cookie.length>0) {
            let arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
            
            for(let i=0;i<arr.length;i++){
                let arr2=arr[i].split('=');//再次切割
                
                //判断查找相对应的值
                if(arr2[0]=='userName'){
                this.username=arr2[1];//保存到保存数据的地方
                }else if(arr2[0]=='userPwd'){
                this.password=arr2[1];
                }
            }
            }
        },

         back() {
            //返回上一级
            this.$router.go(-1);
        },

        onSelect(option) {
        Toast(option.name);
        this.showShare = false;
        },

        showPopup() {
        this.show = true;
        },

        goodJob(){
             if(this.username=='Admin'&& this.password==='123456'){
            if(this.good==false){
                 this.like = this.liked;
                 this.goods++;
                 this.good = true;
                 
            }else if(this.good ==true){
                this.like = 'good-job-o';
                this.goods--;
                this.good = false
            }
           }

        },

        Collection(){
             if(this.username=='Admin'&& this.password==='123456'){
            if(this.stared==false){
                 this.star = this.stard;
                 
                 this.stared = true;
                 
            }else if(this.stared ==true){
                this.star = 'star-o';
                
                this.stared = false
            }
        }
        }
    


  },


}
</script>

<style lang="less" >

    .nav-item{
        height: 50px;
        display: flex;

        .line{
        border-left: 1px solid rgb(170, 163, 163);
       
        margin: auto;
        height: 28px;
    }

    .van-tabbar{
        background-color: #f6f6f6;
    }
    .van-tabbar-item{
           
            height: 55px;
           
        }
    .van-tabbar-item--active{
            background-color: #f6f6f6;
        }
    .van-cell{
        top: 5px;
        background-color:#f6f6f6;
        font-size: 20px;
        color: #646566;
        
    }

    }
    
    
    
    


</style>